/*
 * @Description: 填报常见问题
 * @Author: mengjiajun
 * @Date: 2023-12-15 17:13:46
 * @LastEditors: mengjiajun
 * @LastEditTime: 2023-12-18 09:33:17
 * @FilePath: \foodstuff-safety-responsibility\src\pages\User\components\CommonProblem\index.tsx
 */

import {
  Icon,
  InfiniteScroll,
  InfiniteScrollInstance,
  PullToRefresh,
} from "@antmjs/vantui";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useRef, useState } from "react";

const mockInfos = async (): Promise<Record<string, any>[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const _resultData: Record<string, any> = [];
      for (let i = 0; i < 10; i++) {
        _resultData.push({
          id: Math.round(Math.random() * (10000 - 1)) + 1,
          type: 0,
          value: "注册登录常见问题",
        });
      }
      resolve(_resultData as any);
    }, 1000);
  });
};

const CommonProblem: React.FC = () => {
  const infiniteScrollInstance = useRef<InfiniteScrollInstance>();
  const [data, setData] = useState<Record<string, any>[]>([]);

  const loadMore = async () => {
    return new Promise(async (resolve) => {
      const result = await mockInfos();
      const newData = [...data, ...result];
      setData(newData);
      // 以下是简单的模拟请求，正常请求请按条件执行`resolve('complete')`
      //   resolve(newData.length > 60 ? "complete" : "loading");
      resolve("complete");
    });
  };

  const onRefresh = () => {
    return new Promise(async (resolve) => {
      const result = await mockInfos();
      setData(result);
      infiniteScrollInstance?.current?.reset();
      resolve(true);
    });
  };

  return (
    <View className="p-3 w-full h-[100vh] flex flex-col">
      <View className="flex justify-between h-[80px] items-center">
        <View className="flex flex-row items-center flex-1 h-full gap-2 px-4 rounded-full flex-nowrap bg-slate-100">
          <Icon name="search" size="18px" className="icon" color="#666"></Icon>
          <Text className="text-[#666]">搜索</Text>
        </View>
        <View className="flex items-center h-full px-4 rounded-full bg-slate-100">
          重置
        </View>
      </View>

      <View className="flex-1 w-full overflow-auto">
        <PullToRefresh
          onRefresh={onRefresh as () => Promise<undefined>}
          catchMove
        >
          <View className="relative px-2 py-6">
            {data.map((item, index) => (
              <View
                className="h-[64px] flex items-center truncate w-full border-b-2 border-solid border-[#e2e2e2] mt-4"
                key={`common-problem-item-${index}`}
                onClick={() => {
                  Taro.navigateTo({
                    url: "/pages/User/components/CommonProblem/components/ProblemDetail/index",
                  });
                }}
              >
                {item.value}
              </View>
            ))}
            <InfiniteScroll
              loadMore={
                loadMore as () => Promise<"complete" | "loading" | "error">
              }
              ref={infiniteScrollInstance}
            />
          </View>
        </PullToRefresh>
      </View>
    </View>
  );
};

export default CommonProblem;
